<template>
    <div>

      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>网站管理</el-breadcrumb-item>
        <el-breadcrumb-item>模板管理</el-breadcrumb-item>
      </el-breadcrumb>

      <el-card class="box-card">


        <el-dialog title="上传模板" :visible.sync="dialogVisible" width="30%" :append-to-body=true>

          <el-form :model="templateForm" :rules="userRules" ref="userForm" label-width="80px">
            <el-row :gutter="22">
              <el-col :span="11">
                <el-form-item label="模板名称" prop="name">
                  <el-input v-model="templateForm.name" autocomplete="off" style="width: 150px"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-upload
              class="upload-demo"
              drag
              action="/api/education-website/eduTemplate/importExcel"
              :on-success="uploadExcelSuccess"
              multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">上传模板</div>
            </el-upload>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </div>
        </el-dialog>


        <el-form :model="template" class="demo-form-inline" >
          <el-row :gutter="20">
            <el-form-item>
              <el-col :span="4">
                <el-input placeholder="模板名称" v-model="template.name"></el-input>
              </el-col>
              <el-button plain type="info" @click="searchList">搜索</el-button>
              <el-button type="primary" @click="addSave">上传模板</el-button>
            </el-form-item>
          </el-row>
        </el-form>


        <el-table
          :data="tableData"
          style="width: 60%">
          <el-table-column
            prop="name"
            label="模板名称"
            width="150">
          </el-table-column>
          <el-table-column
            prop="path"
            label="模板路径"
            width="150">
          </el-table-column>
<!--          <el-table-column-->
<!--            prop="createTime"-->
<!--            label="创建时间"-->
<!--            width="150">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="createUser"-->
<!--            label="创建人"-->
<!--            width="150">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="updateTime"-->
<!--            label="更新时间"-->
<!--            width="150">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="updateUser"-->
<!--            label="更新人"-->
<!--            width="150">-->
<!--          </el-table-column>-->
          <el-table-column
            label="状态"
            width="150">
            <template slot-scope="scope">
              {{scope.row.status|statusFit}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="150">
            <template slot-scope="scope">
              <el-button size="small" type="text" v-if="scope.row.status==0" @click="updateTemplate(scope.row.id)">启用</el-button>
              <el-button size="small" type="text" v-if="scope.row.status==1" @click="updateTemplate(scope.row.id)">未启用</el-button>
              <!--<el-button type="primary" @click="upTemplate(scope.row.id)">修改</el-button>-->
              <el-button size="small" type="text" @click="deleteTemplate(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

      </el-card>


    </div>
</template>

<script>
    export default {
        name: "Template",
      data(){
          return{
            templateForm:{},
            tableData:[],
            template:{},
            dialogVisible:false,
            currentPage:0,
            pageSize:5,
            total:0,
            userRules:{
              name:[
                {required: true, message: '请输入模板名称', trigger: 'blur'}
              ]
            }
          }
      },
      methods:{
          //模板列表
        searchList:function () {
          this.$http.post("/education-website/eduTemplate/list/"+this.currentPage+"/"+this.pageSize,this.template).then((res)=>{
            this.tableData=res.data.result.list;
            this.total=res.data.result.total;
          })
        },
        //添加模板
        addSave:function () {
          this.dialogVisible=true;
        },
        //保存模板
        save:function(){
          this.$http.post("/education-website/eduTemplate/save",this.templateForm).then((res)=>{
            if(res.data.success){
              this.$message.success(res.data.message);
              this.searchList();
              this.dialogVisible=false;
            }else{
              this.$message.error(res.data.message);
            }
          })
        },
        //导入模板
        uploadExcelSuccess:function(res, file){
          this.templateForm.path = res.result.path;
        },
        //修改状态
        updateTemplate:function (id) {
          //this.dialogVisible=true;
          this.$http.get("/education-website/eduTemplate/updateTemplate/"+id).then((res)=>{
            if(res.data.success){
              //this.templateForm=res.data.result;
              this.$message.success(res.data.message);
            }else{
              this.$message.error(res.data.message);
            }
            this.searchList();
          })
        },
        //修改模板
        upTemplate:function(id){
          this.dialogVisible=true;
          this.$http.get("/education-website/eduTemplate/upTemplate/"+id).then((res)=>{
            if(res.data.success){
              this.templateForm=res.data.result;
            }else{
              this.$message.error(res.data.message);
            }
            this.searchList();
          })
        },
        //删除模板
        deleteTemplate:function (id) {
          this.$http.get("/education-website/eduTemplate/deleteTemplate/"+id).then((res)=>{
            if(res.data.success){
              this.$message.success(res.data.message);
            }else{
              this.$message.error(res.data.message);
            }
            this.searchList();
          })
        },
        //分页
        handleSizeChange(val) {
          this.pageSize=val;
          this.searchList();
        },
        handleCurrentChange(val) {
          this.currentPage=val;
          this.searchList();
        },


      },
      mounted () {
        this.searchList();
      },
      filters:{
        statusFit:function (val) {
          if(val==0){
            return '未启用';
          }
          if(val==1){
            return '启用';
          }
        }
      }
    }
</script>

<style scoped>

</style>
